<template>
  <el-dialog @close="close" v-model="dialogVisible" :title="title" width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="医院平台" prop="platform_id" v-if="!route.query.id">
        <el-select
          v-model="ruleForm.platform_id"
          clearable
          filterable
          @change="platformChange"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option v-for="item in platList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="科室" prop="department_id">
        <el-select
          v-model="ruleForm.department_id"
          filterable
          multiple
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option v-for="item in deptList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="房间名称" prop="name">
        <el-input v-model="ruleForm.name" placeholder="请输入房间名称" />
      </el-form-item>
      <el-form-item label="房间编号" prop="number">
        <el-input v-model="ruleForm.number" placeholder="请输入房间编号" />
      </el-form-item>
      <el-form-item label="房间介绍" prop="introduction">
        <el-input v-model="ruleForm.introduction" type="textarea" placeholder="请输入房间介绍" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-switch
          v-model="ruleForm.status"
          inline-prompt
          active-text="启用"
          inactive-text="禁用"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="saveLoading" @click="handleConfim"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
import { reactive, ref } from 'vue'
import { departmentList, addRoom, editRoom, platformList } from '@/api/admin'
import { useRoute } from 'vue-router'
const route = useRoute()
const ruleFormRef = ref<FormInstance>()
const dialogVisible = ref<boolean>(false)
const title = ref('新增房间')

const rules = reactive({
  platform_id: [{ required: true, message: '请选择医院平台', trigger: 'change' }],
  department_id: [{ required: true, message: '请选择科室', trigger: 'change' }],
  name: [{ required: true, message: '请输入房间名称', trigger: 'blur' }],
  number: [{ required: true, message: '请输入房间编号', trigger: 'blur' }],
})
const ruleForm = reactive({
  platform_id: route.query.id || '',
  department_id: [],
  name: '',
  introduction: '',
  number: '',
  status: 1,
})
const deptList = ref() //上级部门
const platList = ref() //医院平台
const saveLoading = ref(false)
const emit = defineEmits<{ (event: 'refresh'): void }>()

function close() {
  ruleFormRef.value.resetFields()
  if (ruleForm.id) delete ruleForm.id
  Object.keys(ruleForm).forEach((key) => {
    if (key == 'status') ruleForm[key] = 1
    else if (key == 'platform_id') ruleForm[key] = route.query.id
    else if (key == 'department_id') ruleForm[key] = []
    else ruleForm[key] = ''
  })
}

const show = (item = {}) => {
  title.value = '新增房间'
  if (item.id) {
    title.value = '编辑房间'
    ruleForm.id = item.id
    Object.keys(ruleForm).forEach((key) => {
      if (key == 'department_id') {
        ruleForm[key] = []
        let arr = item[key].split(',')
        arr.forEach((item) => {
          ruleForm[key].push(Number(item))
        })
      } else if (key == 'platform_id') {
        ruleForm[key] = Number(item[key])
      } else {
        ruleForm[key] = item[key]
      }
    })
  }
  dialogVisible.value = true
  getDeptList()
  if (!route.query.id){
    getPlatList()
  }
  if (route.query.deptId && !ruleForm.department_id.length){
    ruleForm.department_id.push(Number(route.query.deptId));
    // console.log(ruleForm.department_id);
  }  
}

//医院平台列表
const getPlatList = () => {
  platformList({ selectFields: 'id,name'}).then((res) => {
    if (res.code == 200) {
      platList.value = res.data
      if(res.data.length==1) route.query.id = ruleForm.platform_id = res.data[0].id;
    }
  })
}

//上级部门列表
const getDeptList = () => {
  departmentList({
    platform_id: ruleForm.platform_id ,
    selectFields: 'id,name',
  }).then((res) => {
    if (res.code == 200) {
      deptList.value = res.data
    }
  })
}

const platformChange =() =>{
  getDeptList();
}

const handleConfim = async (done: () => void) => {
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      ruleForm.department_id = ruleForm.department_id.join(',')
      saveLoading.value = true
      if (ruleForm.id) {
        //编辑
        editRoom(ruleForm).then((res) => {
          if (res.code == 200) {
            ElNotification({
              title: '编辑成功',
              message: res.msg,
              type: 'success',
            })
            emit('refresh')
          }
          dialogVisible.value = false
          saveLoading.value = false
        })
      } else {
        //新增
        addRoom(ruleForm).then((res) => {
          if (res.code == 200) {
            ElNotification({
              title: '添加成功',
              message: res.msg,
              type: 'success',
            })
            emit('refresh')
          }
          dialogVisible.value = false
          saveLoading.value = false
        })
      }
    }
  })
}

defineExpose({
  show,
})
</script>
<style lang="scss" scoped>
</style>

